.post-excerpt-link {
	background: var( --color-neutral-0 );
	color: var( --color-neutral-50 );
	padding: 16px 48px 16px 24px;
	margin: 20px 0 8px;
	position: relative;

	@include breakpoint-deprecated( '<480px' ) {
		padding-left: 16px;
	}

	.gridicon {
		position: absolute;
			right: 16px;
			top: 10px;
		padding: 8px;
		cursor: pointer;
		fill: var( --color-neutral-20 );
		width: 20px;
		height: 20px;
		transition: all 0.15s ease-in-out;

		@include breakpoint-deprecated( '<480px' ) {
			right: 8px;
		}

		&:hover {
			fill: var( --color-primary-light );
		}
	}

	&.is-showing-notice {
		.gridicon {
			fill: var( --color-neutral-70 );
		}

		.post-excerpt-link__helper {
			max-height: 300px;
			padding-top: 8px;
		}
	}
}

.post-excerpt-link__helper {
	max-height: 0;
	overflow: hidden;
	font-size: $font-body-small;
	color: var( --color-text-subtle );
	margin: 0;
	transition: all 0.15s ease-in-out;
}
